<script lang="ts" setup>
import { ClassInfoApi } from '@/apis'
import type { TableInstanceColumns } from '@/components/ProTable/type'
import { formatMoney } from '@/utils/common'

const props = withDefaults(defineProps<Props>(), {
  classId: undefined,
})
interface Props {
  classId: string
}
const router = useRouter()

const loading = ref<boolean>(false)
const tableData = ref<ClassInfoApi.UnpaidStudentResp[]>([])
const getList = async () => {
  loading.value = true
  ClassInfoApi.getUnpaidStudents(props.classId).then((res) => {
    tableData.value = res || []
  }).finally(() => {
    loading.value = false
  })
}

const columns: TableInstanceColumns[] = [
  { title: '订单号', dataIndex: 'orderId', slotName: 'id', fixed: 'left', width: 210 },
  { title: '学生', dataIndex: 'studentId', slotName: 'student', width: 180 },
  { title: '报名课次数', dataIndex: 'enrollLessonCount', slotName: 'enrollLessonCount', width: 110, ellipsis: true, tooltip: true },
  { title: '订单状态', dataIndex: 'status', slotName: 'status', width: 110 },
  // { title: '支付状态', dataIndex: 'payOff', slotName: 'payOff', align: 'center', width: 110 },
]

// 详情
const onDetail = (row) => {
  router.push({ path: '/shop/enrollment/order/detail', query: { id: row.id } })
}

// 班级详情
const toClassDetail = (row) => {
  router.push({ path: '/education/class/detail', query: { id: row.classId } })
}

onMounted(() => {
  getList()
})
</script>

<template>
  <ProTable
    :data="tableData"
    :columns="columns"
    :loading="loading"
    @refresh="getList"
  >
    <template #id="{ record }">
      <a-link v-permission="['edu:student:manage']" @click="onDetail(record)">
        {{ record.orderId }}
      </a-link>
      <div class="pl-4px text-13px text-gray-5">
        {{ record.createTime }}
      </div>
    </template>
    <template #student="{ record }">
      <CellStudent :id="record.studentId" :name="record.studentName" :avatar="record.avatar" :phone="record.mobilePhone" />
    </template>
    <template #orderItem="{ record }">
      <div class="class-name">
        <div v-for="(item, index) in record.orderItemNameInfoList" :key="index">
          <a-link v-permission="['edu:class:read']" @click="toClassDetail(item)">
            {{ item.className }}
          </a-link>
          <a-tag class="ml-1" color="orange">
            {{ JSON.parse(item.lessonIndexes || '[]').length }}节
          </a-tag>
        </div>
      </div>
    </template>
    <template #totalPrice="{ record }">
      <div class="font-size-16px font-600">
        {{ formatMoney(record.actualTotalPrice) }}
      </div>
      <div class="text-13px text-gray-5">
        原价:
        <span class="line-through">{{ formatMoney(record.originalTotalPrice) }}</span>
      </div>
    </template>
    <!-- <template #payOff="{ record }">
      <div class="flex-col-center-center">
        <div v-if="record.payOff" class="text-13px text-gray-5">
          已支付
        </div>
        <div v-else>
          未支付
        </div>
      </div>
    </template> -->
    <template #status="{ record }">
      <CellDict code="OrderStatusEnum" :value="record.status" />
    </template>
  </ProTable>
</template>

<style lang="less" scoped>
.custom-filter {
  padding: 10px;
  background: var(--color-bg-5);
  border: 1px solid var(--color-neutral-3);
  border-radius: var(--border-radius-medium);
  box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
}

.custom-filter-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
</style>
